<template>
	<view style="width: 100%;display: flex;">
		<view class="left">
			<manage></manage>
		</view>
		<view style="width: 90%;">
			<uni-search-bar placeholder="搜索作品编号 或 订单编号" bgColor="#EEEEEE" @confirm="search" v-model="searchValue"
				@cancel="seachCancel" />
			<!-- :loading="true" -->
			<uni-table border stripe ref="table" type="selection" emptyText="暂无更多数据" @selection-change="multipleChoose">
				<uni-tr>
					<uni-th align="center">所有作品<button type="primary" @click="multipleFinishWorks">多选 已完成订单移除</button>
					</uni-th>
				</uni-tr>
				<uni-tr class="cardCss" v-for="(item, index) in baseData" :key="index">
					<uni-td>
						<uni-card style="width: 90%;height: 210px;">
							<scroll-view scroll-y="true" style="height: 200px;">
								<uni-row>
									<uni-col :span="5">
										<view>
											<image v-if="item.customWorks.imagePath != null"
												:src="item.customWorks.imagePath" class="customImgSubCss"></image>
											<image v-if="item.customWorks.imagePath == null"
												src="../../static/common/my.png" class="notAvailable"></image>
										</view>
									</uni-col>
									<uni-col :span="19">
										<uni-row style="text-align: center;">
											<uni-col :span="24">
												<text
													style="font-size: 15px; color: #e65600;">《{{item.customWorks.worksName}}》</text>
											</uni-col>
										</uni-row>
										<uni-row>
											<uni-col :span="12">
												<text>作品编号：{{item.customWorks.id}}</text>
											</uni-col>
											<uni-col :span="12">
												<text>手机号：{{item.customWorks.phone}}</text>
											</uni-col>
										</uni-row>
										<uni-row>
											<uni-col :span="12">
												<text>作品名称：{{item.customWorks.worksName}}</text>
											</uni-col>
											<uni-col :span="12">
												<text>淘宝账号：{{item.customWorks.tbAccount}}</text>
											</uni-col>
										</uni-row>
										<uni-row>
											<uni-col :span="12">
												<text>创建时间：{{item.customWorks.createTime}}</text>
											</uni-col>
											<uni-col :span="12">
												<text>材质：{{$store.state.textures[item.customWorks.texture]}}</text>
											</uni-col>
										</uni-row>
										<uni-row>
											<uni-col :span="12">
												<text>订单编号：{{item.customWorks.orderId}}</text>
											</uni-col>
											<uni-col :span="12">
												<text>尺寸：{{$store.state.sizes[item.customWorks.size]}}</text>
											</uni-col>
										</uni-row>
										<uni-row style="border-bottom: 1px solid #C7C7C7;">
											<uni-col :span="24">
												<text>备注：{{item.customWorks.remark}}
												</text>
											</uni-col>
										</uni-row>
										<view class="operationCss">
											<button type="primary" plain @click="updateWorks(index)">修改</button>
											<button type="primary" plain @click="finishWorks(index)">已完成移除订单</button>
										</view>
									</uni-col>
								</uni-row>
							</scroll-view>
						</uni-card>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>

		<!-- 修改作品  -->
		<view>
			<uni-popup ref="updateWorksDialog" type="dialog">
				<scroll-view scroll-y="true" class="scroll-Y">
					<uni-popup-dialog ref="inputClose" title="修改作品" @confirm="upConfirm">
						<uni-forms ref="editWorks" :modelValue="editWorks" labelWidth="80px">
							<uni-forms-item label="订单编号:" leftIcon="plusempty">
								<uni-easyinput v-model="editWorks.orderId"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="淘宝账号:" leftIcon="staff">
								<uni-easyinput v-model="editWorks.tbAccount"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="手机号:" leftIcon="phone">
								<uni-easyinput v-model="editWorks.phone"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="作品名称:" leftIcon="compose">
								<uni-easyinput v-model="editWorks.worksName"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="材质" leftIcon="map">
								<picker @change="texturePicker" :value="editWorks.texture"
									:range="$store.state.textures">
									<view class="textureCss">{{$store.state.textures[editWorks.texture]}}</view>
								</picker>
							</uni-forms-item>
							<uni-forms-item label="尺寸" leftIcon="circle">
								<picker @change="sizePicker" :value="editWorks.size" :range="$store.state.sizes">
									<view class="textureCss">{{$store.state.sizes[editWorks.size]}}</view>
								</picker>
							</uni-forms-item>
							<uni-forms-item label="备注">
								<uni-easyinput v-model="editWorks.remark"></uni-easyinput>
							</uni-forms-item>
						</uni-forms>
					</uni-popup-dialog>
				</scroll-view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import manage from "@/components/manage/manage.vue";
	export default {
		components: {
			manage,
		},
		methods: {
			seachCancel(e) {
				this.initbaseData()
			},
			multipleFinishWorks() {
				let tempArr = []
				this.multiple.forEach((v, k) => {
					tempArr.push(this.baseData[v].id)
				})
				if (tempArr.length == 0) {
					return
				}
				uni.request({
					url: this.api.submitWorks,
					method: "DELETE",
					data: tempArr,
					success: res => {
						if (res.data.code == 500) {
							this.utilList.faToast(res.data.message)
							return
						}
						this.utilList.scToast(res.data.message)
						this.multiple.forEach((v, k) => {
							this.baseData.splice(v - k, 1)
						})
						this.$refs.table.clearSelection()
					}
				})
			},
			multipleChoose(obj) {
				this.multiple = obj.detail.index
			},
			finishWorks(index) {
				uni.request({
					url: this.api.submitWorks,
					method: "DELETE",
					data: [this.baseData[index].id],
					success: res => {
						if (res.data.code == 500) {
							this.utilList.faToast(res.data.message)
							return
						}
						this.utilList.scToast(res.data.message)
						this.baseData.splice(index, 1)
					}
				})
			},
			search() {
				uni.request({
					url: this.api.submitWorks + "searchWorks",
					method: 'GET',
					data: {
						searchText: this.searchValue
					},
					success: res => {
						if (res.data) {
							this.baseData = res.data
						}
					}
				});
			},
			sizePicker(e) {
				this.editWorks.size = e.detail.value
			},
			texturePicker(e) {
				this.editWorks.texture = e.detail.value
			},

			updateWorks(index) {
				this.editWorks = JSON.parse(JSON.stringify(this.baseData[index].customWorks))
				this.$refs.updateWorksDialog.open()
			},
			upConfirm() {
				uni.uploadFile({
					url: this.api.customWorks + "update",
					formData: {
						'customWorksJson': JSON.stringify(this.editWorks)
					},
					success: (res) => {
						if (res.data) {
							uni.showToast({
								title: "更新成功"
							})
							this.initbaseData()
							let sc = JSON.parse(res.data)
							uni.setStorage({
								key: this.editWorks.id.toString(),
								data: sc.obj
							})
						}
					}
				})
			},
			initbaseData() {
				uni.request({
					url: this.api.submitWorks,
					method: "GET",
				}).then(data => {
					let [err, res] = data
					this.baseData = res.data
				})
			},
		},
		data() {
			return {
				editWorks: {
					createTime: "",
					id: -1,
					imagePath: "",
					orderId: "",
					phone: "",
					remark: "",
					size: "",
					tbAccount: "",
					texture: "",
					worksName: ""
				},
				baseData: [],
				multiple: [],
				searchValue: ""
			}
		},
		onLoad() {

			this.initbaseData()
		}
	}
</script>


<style scoped>
	.uni-group {
		display: flex;
		align-items: center;
		margin-top: 10px;

	}

	.left {
		border: 1px solid;
		background-color: #c5c5c5;
		height: 100%;
		width: 10 %;
	}

	.rec {
		float: left;
		width: 75%;
		/* height: 100%; */

	}


	input {
		border: 1px solid;
		border-radius: 18px;
	}

	uni-button {
		font-size: 7px;
		border-radius: 18px;
	}

	.table {
		width: 100%;
		border: 1px solid;
		text-align: center;
	}

	.uni-th {
		/* border: #000000 1px solid; */
		/* background-color: #c5c5c5; */
	}

	uni-td {
		align-items: center;
	}

	.button-edu {
		background-color: #18BC37;
	}

	.button-del {
		background-color: #c00000;
	}

	.scroll-Y {
		margin-top: 20px;
		height: 90%;
	}
</style>
